<template>
  <a-drawer
    title="修改部门"
    :maskClosable="false"
    width=650
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="userEditVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">

    <a-tabs defaultActiveKey="2" size="small">
      <a-tab-pane key="1">
      <span slot="tab">
        <a-icon type="android"/>
        部门信息
      </span>
        <a-form :form="form">
          <a-form-item label='系统名称' v-bind="formItemLayout">
            <a-input v-decorator="[
        'appName',
        { rules: [{ required: true, message: '请输入系统名称!' }] }
        ]"/>
          </a-form-item>
          <a-form-item label='系统编号' v-bind="formItemLayout">
            <a-input v-decorator="[
        'appCode',
        { rules: [{ required: true, message: '请输入系统编号!' }] }
        ]"/>
          </a-form-item>
          <a-form-item label='数据库标识' v-bind="formItemLayout">
            <a-input v-decorator="[
        'appDataBaseName'
        ]"/>
          </a-form-item>
          <a-form-item label='程序地址' v-bind="formItemLayout">
            <a-input v-decorator="[
        'appUrl'
        ]"/>
          </a-form-item>
          <a-form-item label="备注信息" v-bind="formItemLayout">
            <a-input  v-decorator="['appDescription']"/>
          </a-form-item>

        </a-form>
      </a-tab-pane>

    </a-tabs>

    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-drawer>
</template>
<script>
  import {mapState, mapMutations} from 'vuex'

  const formItemLayout = {
    labelCol: {span: 3},
    wrapperCol: {span: 18}
  }
  export default {
    name: 'UserEdit',
    props: {
      userEditVisiable: {
        default: false
      }
    },
    data() {
      return {
        formItemLayout,
        account: {},
        form: this.$form.createForm(this),
        deptTreeData: [],
        keychecks: [],
        roleData: [],
        menuKeys: [],
        userDept: [],
        mockData: [],
        targetKeys: [],
        appInfoData: [],
        roleInfoData: [],
        roleKeys: [],
        orgInfoData: [],
        menuInfoData: [],
        userId: '',
        loading: false
      }
    },
    computed: {
      ...mapState({
        currentUser: state => state.account.user
      })
    },
    created() {
      //this.getMock();
      // this.getAppInfo();
      // this.getRoleInfo();
      // this.getMenuInfoByTree();
    },
    methods: {
      ...mapMutations({
        setUser: 'account/setUser'
      }),
      onClose() {
        this.loading = false
        this.form.resetFields()
        this.$emit('close')
      },
      setFormValues({...user}) {
        this.userId = user.appId
        let fields = ['appName', 'appCode','appDataBaseName','appUrl','appDescription']
        Object.keys(user).forEach((key) => {
          if (fields.indexOf(key) !== -1) {
            this.form.getFieldDecorator(key)
            let obj = {}
            obj[key] = user[key]
            this.form.setFieldsValue(obj)
          }
        })
      },
      onDeptChange(value) {
        this.userDept = value
      },
      handleSubmit() {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.loading = true
            let user = this.form.getFieldsValue()
            user.appId = this.userId;
            this.$put('/power/app-info/AppInfoEdit', {
               ...user
            }).then((r) => {
              this.loading = false
              this.$emit('success')
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      getAccountInfo() {
        const targetKeys = [];
        const mockData = [];
        this.$get('/power/account-info/list').then((r) => {
          r.data.data.forEach(account => {
            const data = {
              key: account.accountId.toString(),
              title: account.accountName.toString(),
              description: account.accountName,
              chosen: false,
            };
            if (data.chosen) {
              targetKeys.push(data.key);
            }
            mockData.push(data);
          })
          this.accountInfo = r.data.data;
        })
        this.mockData = mockData;
        this.targetKeys = targetKeys;
      },
      getOrgInfo() {
        this.$get('/power/org-info').then((r) => {
          this.orgInfoData = r.data.data;
        })
      },
      getAppInfo() {
        const targetKeys = [];
        const mockData = [];
        this.$get('/power/app-info').then((r) => {
          r.data.data.forEach(app => {
            const data = {
              key: app.appId.toString(),
              title: app.appName.toString(),
              description: app.appDescription,
              chosen: false,
            };
            if (data.chosen) {
              targetKeys.push(data.key);
            }
            mockData.push(data);
          })
          this.appInfoData = r.data.data;
        })
        this.mockData = mockData;
        this.targetKeys = targetKeys;
      },
      getRoleInfo() {
        const targetKeys = [];
        const mockData = [];
        this.$get('/power/role-info').then((r) => {
          r.data.data.forEach(role => {
            const data = {
              key: role.roleId.toString(),
              title: role.roleName.toString(),
              description: role.roleDescription,
              chosen: false,
            };
            if (data.chosen) {
              targetKeys.push(data.key);
            }
            mockData.push(data);
          })
        })
        this.roleInfoData = mockData;
        this.roleKeys = targetKeys;
      },
      getMenuInfoByTree() {
        this.$get('/power/menu-info/tree').then((r) => {
          this.menuInfoData = r.data.data;
        })
      },
      getMenuInfo() {
        this.$get('/power/menu-info').then((r) => {
          this.menuInfoData = r.data.data;
          this.menuKeys.forEach((menu) => {
            this.menuInfoData.forEach((menuInfo) => {
              if (menu.toString() === menuInfo.menuId.toString()) {
                menuInfo.sele = true;
              }
              if (menuInfo.menuInfos != null) {
                menuInfo.menuInfos.forEach((menus) => {
                  if (menu.toString() === menus.menuId.toString()) {
                    menus.sele = true;
                  }
                  if (menus.menuInfos != null) {
                    menus.menuInfos.forEach((menuss) => {
                      if (menu.toString() === menuss.menuId.toString()) {
                        menuss.sele = true;
                      }

                    })
                  }
                })
              }
            })
          })
          //console.log(JSON.stringify(this.menuInfoData));
        })
      },
      filterOption(inputValue, option) {
        return option.description.indexOf(inputValue) > -1;
      },
      handleChange(targetKeys, direction, moveKeys) {
        console.log(targetKeys, direction, moveKeys);
        this.targetKeys = targetKeys;
      },
      handleChanges(targetKeys, direction, moveKeys) {
        this.roleKeys = targetKeys;
      },
      handleSearch(dir, value) {
        console.log('search:', dir, value);
      },
      onSelect(keys) {
        this.menuKeys = keys,
          console.log('Trigger Select', keys);
      },
      onCheck(checkedKeys, e) {
        console.log(JSON.stringify(checkedKeys));
      },
      getMessageByOrgId(orgId) {
        this.$get('/power/org-info/info/' + orgId).then((r) => {
          this.menuKeys = [];
          if (r.data.data != undefined) {
            this.targetKeys = r.data.data;
          }
        })
      },
      getMessageByAccount(accountId) {
        this.$get('/power/role-info/info/' + accountId).then((r) => {
          this.menuKeys = [];
          if (r.data.bindMenuInfo != undefined) {
            r.data.bindMenuInfo.forEach((menu) => {
              this.menuKeys.push(parseInt(menu))
            })
          }
          if (r.data.bindAppInfo != undefined) {
            this.targetKeys = r.data.bindAppInfo;
          }
        })
      }
    },
    watch: {
      userEditVisiable() {
        if (this.userEditVisiable) {
          this.$get('role').then((r) => {
            this.roleData = r.data.rows
          })
          this.$get('dept').then((r) => {
            this.deptTreeData = r.data.rows.children
          })
        }
      }
    }
  }
</script>
